<template>
<div class="users">
    <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
            <Input type="text" v-model.trim="formInline.user" placeholder="请输入登录账号">
            <img :src="loginImg.user" alt="" slot="prepend">
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model.trim="formInline.password" placeholder="请输入登录密码">
            <img :src="loginImg.password" alt="" slot="prepend">
            </Input>
        </FormItem>
        <div class="rem">
            <checkbox>记住密码</checkbox>
            <p @click="clickPasBack">忘记密码</p>
        </div>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')" class="login-btn">登录</Button>
        </FormItem>
        <p class="register" @click="clickRegister">注册新账号<img :src="loginImg.enter" alt=""></p>
    </Form>
</div>
</template>

<script>
export default {
    name: 'UserLogin',
    data() {
        return {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [{
                    required: true,
                    message: "请输入账号",
                    trigger: 'blur'
                }],
                password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        type: 'string',
                        min: 6,
                        max: 16,
                        message: '密码由6-16位字母/数字/符号组成',
                        trigger: 'blur'
                    }
                ]
            },
            loginImg: {
                user: require('@/assets/account.png'),
                password: require('@/assets/password.png'),
                enter: require('@/assets/enter.1.png')
            },
            // 单选框

        }
    },
    methods: {
        handleSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$emit('on-submit', this.data);
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },

        //    跳转注册页面
        clickRegister() {
            this.$router.push({
                name: 'register'
            });
        },
        // 跳转忘记密码
        clickPasBack() {
            this.$router.push({name:'pasBack'})
        }

    }
}
</script>

<style lang="less" scoped>
.users {
    width: 480px;
    padding: 30px;
    box-sizing: border-box;
    .ivu-form-item-content{
        width: 480px;
    }
    .rem {
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: -moz-flex;
        justify-content: space-between;
        color: #999;

        p {
            cursor: pointer;
        }
    }

    .login-btn {
        width: 430px;
        height: 40px;
        background-color: #EDB1AA;
        color: #fff;
        border: none;
        margin-top: 20px;

        &:hover {
            background-color: #D92410
        }
    }

    .register {
        color: #3a77f0;
        text-align: right;
        cursor: pointer;
    }
}
</style>
